<template>
  <div id="map" style="width: 100%; height: 1000px;"></div>
</template>

<script>
import axios from 'axios';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import { ImageStatic } from 'ol/source.js';
import TileLayer from "ol/layer/Tile";
import { fromArrayBuffer } from 'geotiff';
import { Image as ImageLayer } from 'ol/layer.js';
import XYZ from 'ol/source/XYZ';
import chroma from 'chroma-js';

const url = new URL('../../assets/img/handle.tif', import.meta.url).href;
export default {
  mounted() {
    const demLayer =  new TileLayer({
      source: new XYZ({
        url: 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
      })
    });
    let tfSource ; //tif数据源
    let tiflayer; //图层
    axios.get(url, {
      responseType: 'blob'
    }).then((res) => {
      const blob = new Blob([res.data]);
      const fileReader = new FileReader();
      fileReader.readAsArrayBuffer(blob);
      fileReader.onload = async function() {
        // geotiff解析
        const tiff = await fromArrayBuffer(this.result);
        const image = await tiff.getImage();
        const width = image.getWidth();
        const height = image.getHeight();
        var extentMap = image.getBoundingBox();

        // 如果有值的话解构变量为数组，否则就为undefined(这个red有值)
        // 这里需要注意得是：有的图片不一定是red有值，red也有可能没值
        const [red, green, blue] = await image.readRasters();

        // 这个的数组长度乘以4, 是为了与图片着色对应，分为: r, g, b, a
        const values = new Uint8Array(red.length * 4);
        const min = 0, max = 3; // 设置分类色带的最小值和最大值
        const colorScale = chroma.scale(['purple', 'blue', 'green', 'yellow', 'orange', 'red']).domain([min, max]);

        // 判断着色(这里需要根据等值色来判断赋值)
        for (let i = 0; i < red.length; i++) {
          let value = red[i];
          if(value == -9999) continue
          if (value < min) value = min;
          if (value > max) value = max;
          const color = colorScale(value).rgb();
          values[i * 4] = color[0];
          values[i * 4 + 1] = color[1];
          values[i * 4 + 2] = color[2];
          values[i * 4 + 3] = 255;
        }

        // canvas范畴
        const imageData = new ImageData(new Uint8ClampedArray(values.buffer), width, height);//[255, 0, 0, 255]
        const canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        canvas.getContext('2d').putImageData(imageData, 0, 0);
        tfSource = new ImageStatic({
          url: canvas.toDataURL('image/png'),
          imageExtent: extentMap,
          projection: 'EPSG:4326'
        });
        tiflayer = new ImageLayer({
          source: tfSource
        });
        map.addLayer(tiflayer);
      }
    })
     
    //设置图层,在这里来显示
    const map = new Map({
      target: 'map',
      layers: [demLayer],
      view: new View({
        projection: 'EPSG:4326',
        center: [117.2, 31.8],
        zoom: 8,
        showFullExtent: true
      })
    });
  }
};
</script>
